import React, { PureComponent } from "react"
import { Button, InputItem, SearchBar, Flex } from "antd-mobile"
import MDrawer from "../MDrawer/MDrawer"
import { isNull } from "../../utils/helper"
import MSearchFormWrapper from "../MForm/MSearchFormWrapper"
import { connect } from "dva"
export default class MSeniorSearch extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			searchLabel: "",
			value: "",
			isFirstOpen: true
		}
	}

	componentWillMount() {

	}
	onOpenChange = () => {
		this.setState({
			open: !this.state.open
		})
	}
	onFocus = () => {
		let { value } = this.state;
		this.setState({
			searchLabel: isNull(value) ? "取消" : "搜索"
		})
	}

	onBlur = () => {
		// let {setFormData,field}=this.props;
		// this.setState({
		// 	searchLabel:""
		// })
		// setFormData({
		// 	[field[0]]:this.state.value
		// })
	}
	onChange = (value) => {
		this.setState({
			searchLabel: isNull(value) ? "取消" : "搜索"
		})
		this.setState({
			value: value
		})
	}
	onSearch = () => {
		let { setFormData, field } = this.props;
		let { searchLabel } = this.state;
		if (searchLabel == "搜索") {
			setFormData({
				[field[0]]: this.state.value,
				_random: Math.random()
			})
		}
		else {
			setFormData({
				[field[0]]: this.state.value
			})
		}
	}

	componentDidUpdate() {
		let { open, isFirstOpen } = this.state;
		if (isFirstOpen) {
			if (open) {
				setTimeout(() => {
					this.setState({
						isFirstOpen: false,
						showForm: true
					})
				})
			}
		}
	}
	resetFunc = () => {
		console.log("重置", this.formRef);
		// this.formRef.resetFields()
	}
	submitFunc = (value) => {
		let { setFormData, field } = this.props;
		setFormData({
			...value,
			_random: Math.random()
		})
		this.onOpenChange()
	}

	componentWillReceiveProps(next) {
		let { formData: data1 } = this.props;
		let { formData: data2, field } = next;
		if (!_.isEqual(data1, data2)) {
			let newVal = data2[field[0]];
			if (isNull(newVal)) {
				newVal = undefined
			}
			this.setState({
				value: newVal
			})
		}
	}
	render() {
		let { searchLabel, value, open } = this.state;
		let { place_holder, dispatch, formDataKey, field, search_form_url, formData } = this.props;
		let showSenior = true;
		if (isNull(search_form_url)) {
			showSenior = false
		}
		let searchWrapperProps = {
			open,
			search: search_form_url,
			formDataKey: formDataKey + field[0],
			submitFunc: this.submitFunc.bind(this),
			listFormData: formData
		}
		return (
			<div className="mi-senior-search">
				<div data-flex="cross:center box:last">
					<SearchBar
						onFocus={this.onFocus}
						onBlur={this.onBlur}
						onChange={this.onChange}
						cancelText={searchLabel}
						onCancel={this.onSearch}
						placeholder={place_holder}
						value={value}
					/>
					{
						showSenior ?
							<a onClick={this.onOpenChange} style={{ color: "#108ee9", margin: "0 20px 0 0" }}>高级搜索</a> :
							<span></span>
					}
				</div>
				<MDrawer
					open={open}
					onOpenChange={this.onOpenChange}
					closeDrawer={() => {
					}}
					position="bottom"
					height="85%"
				>
					{
						this.state.showForm && <div style={{ height: "100%" }}>
							<MSearchFormWrapper {...searchWrapperProps} />
						</div>
					}
				</MDrawer>
			</div>
		)
	}
}